import { memo } from "react";
import { useDnD } from "../context/DnDContext";
import RagNode from "./RagNode";


// 节点分类配置
const NODE_CATEGORIES = {
  'AI能力': [
    { text: "开始", imgUrl: "img/input.png", illustrate: "每个节点的起始流程节点", type: "inputNode" as NodeType },
    { text: "AI 对话", imgUrl: "img/llm.png", illustrate: "AI大模型对话", type: "llmNode" as NodeType },
    { text: "知识库搜索", imgUrl: "img/book.png", illustrate: `调用语义检索，从知识库中查找可能与问题相关的参考内容`, type: "knowledgeNode" as NodeType },
    { text: "回复", imgUrl: "img/output.png", illustrate: "结束节点对话的最终回复", type: "outputNode" as NodeType },
  ],
  '逻辑': [
    { text: "条件分支", imgUrl: "img/if.png", illustrate: "根据一定的条件执行不同的分支", type: "ifNode" as NodeType },
    { text: "循环运行", imgUrl: "img/iteration.png", illustrate: "可输入一组数组，数组在独立循环体内执行", type: "iterationNode" as NodeType }
  ],
  '工具': [
    { text: "HTTP 请求", imgUrl: "img/http.png", illustrate: "可以发送一个HTTP请求，执行更加复杂的操作", type: "httpNode" as NodeType },
    { text: "代码运行", imgUrl: "img/code.png", illustrate: "执行一段简单的脚本代码执行一些复杂的操作", type: "codeNode" as NodeType },
  ]
};

const Sidebar = () => {
  const [_, setType] = useDnD();

  const onDragStart = (event: React.DragEvent<HTMLDivElement>, nodeType: NodeType) => {
    setType && setType(nodeType);
    event.dataTransfer.effectAllowed = "move";
  };

  return (
    <aside>
      {Object.entries(NODE_CATEGORIES).map(([category, nodes]) => (
        <div key={category} className="mb-5">
          <h3 className="text-[14px] font-medium mb-5 ">{category}</h3>
          <div className="grid grid-cols-2 gap-2">
            {nodes.map((node) => (
              <RagNode
                key={node.text}
                text={node.text}
                illustrate={node.illustrate}
                imgUrl={node.imgUrl}
                onDragStart={(event) => onDragStart(event, node.type)}
              />
            ))}
          </div>
        </div>
      ))}
    </aside>
  );
};

export default memo(Sidebar);